<template>
  <div>
    <el-container>
      <el-header>在线收银台</el-header>
      <el-main>
            <h1>支付宝扫码支付</h1>
        <vueQr :text="aliData.qr_code" 
            colorDark="#181818" 
            colorLight="#ffffff"
            :logoSrc="logoImg" 
            :callback="getImgInfo"
            :size="500"></vueQr>

            <h2>支付金额：{{plan.price}}元</h2>
      </el-main>
      <el-footer>powerBy Edwin</el-footer>
    </el-container>
  </div>
</template>

<script>
import AliPayApi from '@/api/AliPayApi'
import vueQr from "vue-qr";
export default {
  components: {
    vueQr,
  },

  data(){
    return{
        plan:null,
        user:null,
        aliData:null,
        internal:null
    }
  },

  mounted(){
    // console.log(1010);
    this.setPlaneUser()

    // console.log(1111);
    this.pay()

    // console.log(2222);
    this.verifyIsPay()

    // console.log(3333);
  },

  beforeDestroy(){


    
    this.myClearInterval()
  },
  methods:{
    open1() {
        this.$message({
          message: '充值成功',
          type: 'success'
        });
      },
    setPlaneUser(){
      console.log("payCom");
      console.log(this.$route.query.plan);
      console.log(this.$route.query.user);
        this.plan =JSON.parse(this.$route.query.plan)
        console.log(this.plan);

        this.user = JSON.parse(this.$route.query.user)
        console.log(this.user);
        // console.log(this.plan);
        // console.log(this.user);
    },

    pay(){
        AliPayApi.pay(this.user,this.plan).then(r=>{

          // console.log(123);
          // console.log(r);
            this.aliData = r.data.alipay_trade_precreate_response
            console.log("aliData",this.aliData);
        })
    },

  
    verifyIsPay(){
      //2秒验证一次是否支付
      this.internal =  setInterval(()=>{
        AliPayApi.verifyIsPay(this.aliData).then(r=>{
        // console.log("支付结果");

        if(r.code ==200){
          this.open1()
          this.$router.push("/main")
        }
      })
      },2000)
 
    },

    myClearInterval(){
      clearInterval(this.internal)
    }

  }
};
</script>

<style>
h1{
    color: cornflowerblue;
}
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 30px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  h2{
    color: red;
  }
</style>